﻿<%@ page language="java" import="com.yoyo.itravel.constants.UserConstant" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <%
        String contextPath = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + contextPath + "/";
    %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <meta name="applicable-device" content="pc,mobile">
    <title>登录弹窗</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <link rel="stylesheet" type="text/css" href=".css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href=".css/login_dialog.css">

    <%
        String phone_email = "";
        String password = "";
        String login_info_str = "";
        String checkedRemember = "";
        String checkedAuto = "";
        Cookie[] cookies = request.getCookies();
        for (int i = 0; cookies != null && i < cookies.length; i++) {
            if ((UserConstant.REMEMBER_LOGIN_INFO).equals(cookies[i].getName())) {
                login_info_str = cookies[i].getValue();
                // 存在，获得用户登录信息
                phone_email = login_info_str.split("&")[0];
                password = login_info_str.split("&")[1];
                checkedRemember = login_info_str.split("&")[2];
            }
            if ((UserConstant.AUTO_LOGIN_INFO).equals(cookies[i].getName())) {
                login_info_str = cookies[i].getValue();
                // 存在，获得复选框的值
                checkedAuto = login_info_str.split("&")[2];
            }
        }
        request.setAttribute("checked_remember", checkedRemember);
        request.setAttribute("checked_auto", checkedAuto);
    %>
</head>
<body>

<a class="globalLoginBtn">登录</a>

<div class="modal fade" id="loginModal" style="display:none;">

    <div class="modal-dialog modal-sm" style="width:540px;">
        <div class="modal-content" style="border:none;">
            <div class="col-left"></div>
            <div class="col-right">
                <div class="modal-header">
                    <button type="button" id="login_close" class="close" data-dismiss="modal"><span
                            aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="loginModalLabel" style="font-size: 18px;margin-left: 18px;">登录</h4>
                </div>
                <div class="modal-body">
                    <section class="box-login v5-input-txt" id="box-login">
                        <form id="loginForm">
                            <ul>
                                <li class="form-group">
                                    <input class="form-control" id="phone_email"
                                           name="phone_email" placeholder="请输入邮箱/手机号" type="text"
                                           value='<%=phone_email%>'>
                                </li>
                                <li class="form-group">
                                    <input class="form-control" id="password" name="password"
                                           placeholder="请输入密码" type="password" value='<%=password%>'>
                                </li>
                                <li class="form-group">
                                    <input type="text" id="input_code" placeholder="请输入验证码"
                                           style="font-size: 12px;padding-left: 5px;height: 27px;letter-spacing: 2px;border: 1px solid lightgrey;border-radius: 5px;"/>
                                    <input style="position: absolute;top: 117px;margin-left: 10px;width: 85px;height: 30px;font-size: 21px;color: white;background: linear-gradient(to right, orangered, deepskyblue, cornflowerblue, orangered);
                        -webkit-background-clip: text;color: transparent;border: 1px solid lightgrey;border-radius: 5px;" type="button"
                                           id="code" onclick="createCode()" title='点击更换验证码'/>
                                </li>

                                <input type="checkbox" name="autoLogin" ${checked_auto}
                                       style="margin-top:1px;vertical-align:middle;"/>
                                <span style="margin-bottom:-1px;margin-left: 2px;font-size: 12px;vertical-align: middle;">两周内自动登录</span>
                                <input type="checkbox" name="rememberPwd" ${checked_remember}
                                       style="margin-top:1px;vertical-align:middle;margin-left: 20px;"/>
                                <span style="margin-bottom:-1px;margin-left: 2px;font-size: 12px;vertical-align: middle;">两周内记住密码</span>

                            </ul>
                            <br/>
                            <p class="good-tips marginB10"><a id="btnForgetpsw" target="_blank" class="fr"
                                                              href="forget_pwd.jsp">忘记密码？</a>还没有账号？<a
                                    href="register.jsp" target="_blank" id="btnRegister">立即注册</a></p>
                            <div class="login-box marginB10">
                                <button type="submit" class="btn btn-micv5 btn-block globalLogin">登录</button>
                            </div>
                        </form>
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>

<script src=".js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src=".js/login_dialog/modal.js"></script>
<script type="text/javascript" src=".js/common.js"></script>
<script type="text/javascript" src=".js/layer/layer.js"></script>
<script type="text/javascript" src=".js/login.js"></script>
<script type="text/javascript">

    $(function () {
        $(".modal-header").mouseover(function () {
            $(this).css("cursor", "move");//改变鼠标指针的形状
        });

        $(".modal-header").mousedown(function (e) {
            var offset = $(this).offset();//DIV在页面的位置
            var x = e.pageX;//获得鼠标指针离DIV元素左边界的距离
            var y = e.pageY;//获得鼠标指针离DIV元素上边界的距离
            $(document).bind("mousemove", function (ev) { //绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件

                $("#loginModal").stop();//加上这个之后

                var _x = ev.pageX - x + 38;//获得X轴方向移动的值
                var _y = ev.pageY - y - 15;//获得Y轴方向移动的值

                $("#loginModal").animate({left: _x + "px", top: _y + "px"}, 10);
            });

        });

        $(document).mouseup(function () {
            $("#loginModal").css("cursor", "default");
            $(this).unbind("mousemove");
        });
    })
</script>

<script>

    $(".globalLoginBtn").click(function() {
        $("#loginModal").modal("show")

        var e = [];
        $(".modal").on("show.bs.modal",function() {
            for (var s = 0; e.length > s; s++) e[s] && (e[s].modal("hide"), e[s] = null);
            e.push($(this));
            var o = $(this),
                a = o.find(".modal-dialog"),
                t = $('<div style="display:table; width:100%; height:100%;"></div>');
            t.html('<div style="vertical-align:middle; display:table-cell;"></div>'),
                t.children("div").html(a),
                o.html(t)
        })
    });
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
